<template>
	<view class="my-search-container" :style="{'background-color': bgcolor}">
		<!-- <uni-search-bar 
			:radius="20"
			placeholder="请输入搜索内容" 
			clearButton="always" 
			cancelButton="always" 
			@confirm="search"
			@focus="focus"
			/> -->
			<view class="my-search-box" :style="{'border-radius': reduis + 'px'}" @click="gotoSearch">
				<uni-icons type="search" size="18"></uni-icons>
				<text class="search-title">搜索</text>
			</view>
	</view>
</template>

<script>
	export default {
		props: {
			//背景颜色
			bgcolor:{
				type:String,
				default:'red'
			},
			//圆角尺寸
			reduis: {
				type:Number,
				default:20
			}
		},
		name:"my-search",
		data() {
			return {
			};
		},
		methods:{
			gotoSearch(){
				this.$emit('click')
			}
		}
	}
</script>

<style lang="scss">
.my-search-container{
	background-color: red;
	align-items: center;
	display: flex;
	padding: 0 10px;
	height: 50px;
	.my-search-box{
		border-radius: 20px;
		width: 100%;
		align-content: center;
		line-height: 36px;
		height: 36px;
		background-color: white;
		align-items: center;
		justify-content: center;
		display: flex;
		.search-title{
			font-size: 15px;
		}
	}
}


</style>